<div {{ attributes }}>
    <form
        data-action="live#action:prevent"
        data-live-action-param="saveProduct"
    >
        <div class="row align-items-center">
            <div class="col-2">
                <label for="product-name">Product name:</label>
            </div>
            <div class="col-3">
                <input
                    type="text"
                    data-model="name"
                    class="form-control {{ _errors.has('name') ? 'is-invalid' }}"
                    id="product-name"
                >
                {% if _errors.has('name') %}
                    <div class="invalid-feedback">
                        {{ _errors.get('name') }}
                    </div>
                {% endif %}
            </div>
        </div>

        <div class="row align-items-center mt-3">
            <div class="col-2">
                <label for="product-price">Price:</label>
            </div>
            <div class="col-3">
                <input
                    type="text"
                    data-model="price"
                    class="form-control {{ _errors.has('price') ? 'is-invalid' }}"
                    id="product-price"
                >
                {% if _errors.has('price') %}
                    <div class="invalid-feedback">
                        {{ _errors.get('price') }}
                    </div>
                {% endif %}
            </div>
        </div>

        <div class="row align-items-center mt-3">
            <div class="col-2">
                <label for="product-category">Category:</label>
            </div>
            <div class="col-3">
                <select
                    data-model="category"
                    id="product-category"
                    class="form-control {{ _errors.has('category') ? 'is-invalid' }}"
                >
                    <option value="">Choose a category</option>
                    {% for category_option in categories %}
                        <option value="{{ category_option.id }}" {{ this.isCurrentCategory(category_option) ? 'selected' }}>{{ category_option.name }}</option>
                    {% endfor %}
                </select>
                {% if _errors.has('category') %}
                    <div class="invalid-feedback">
                        {{ _errors.get('category') }}
                    </div>
                {% endif %}
            </div>
            <div class="col-auto">
                <div class="form-text">
                    <a
                        type="button"
                        data-bs-toggle="modal"
                        data-bs-target="#new-category-modal"
                    >+ Add Category
                    </a>
                </div>
            </div>
        </div>

        <div class="mt-3">
            <button type="submit" class="btn btn-primary">Save Product</button>
        </div>
    </form>

    {% component BootstrapModal with {id: 'new-category-modal'} %}
        {% block modal_header %}
            <h5>Add a Category</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        {% endblock %}
        {% block modal_body %}
            <twig:NewCategoryForm />
        {% endblock %}
    {% endcomponent %}
</div>
